<template>
  <div class="container">
    <div class="left-side">
      <el-descriptions title="个人信息" column="1">
        <el-descriptions-item label="用户名称">{{ userInfo.userName}}</el-descriptions-item>
        <el-descriptions-item label="手机号码">{{ userInfo.phonenumber }}</el-descriptions-item>
        <el-descriptions-item label="用户邮箱">{{ userInfo.email}}</el-descriptions-item>
        <el-descriptions-item label="创建日期">{{ userInfo.createTime  }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="right-side">
      <div style="
        font-size: 16px;
        font-weight: 700;
        color: #303133;
        margin-bottom:20px">基本资料
      </div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="基本资料" name="first">
          <el-form ref="form" :model="user"  label-width="80px">
            <el-form-item label="用户昵称" prop="nickName">
              <el-input v-model="user.nickName" maxlength="30"/>
            </el-form-item>
            <el-form-item label="手机号码" prop="phonenumber">
              <el-input v-model="user.phonenumber" maxlength="11"/>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="user.email" maxlength="50"/>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="user.sex">
                <el-radio label="0">男</el-radio>
                <el-radio label="1">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="submit">保存</el-button>
              <el-button type="danger" size="mini" @click="close">关闭</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="修改密码" name="second">
          <el-form ref="form" label-width="80px">
            <el-form-item label="旧密码" prop="oldPassword">
              <el-input v-model="oldPassword" placeholder="请输入旧密码" type="password" show-password/>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input v-model="newPassword" placeholder="请输入新密码" type="password" show-password/>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input v-model="confirmPassword" placeholder="请确认新密码" type="password" show-password/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="submit1">保存</el-button>
              <el-button type="danger" size="mini" @click="close">关闭</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>

import {mapState} from "vuex";

export default {
  name: 'UserInfo',
  data() {
    return {
      userInfo:{},
      user: {
      },
      oldPassword:'',
      newPassword: '',
      confirmPassword: '',
      activeName: 'first'
    };
  },
  created() {
    this.getUserInfo()
  },
  mounted() {
    this.getUser();

  },
  components: {},
  methods: {
    // handleClick(tab, event) {
    //   console.log(tab, event);
    // },
    //获取用户信息
    getUser() {
      this.user = this.userName

    },

    getUserInfo() {
      this.userInfo = this.userName
    },

    //修改基本信息
    async submit(){
      let flag = await this.$store.dispatch("user/updateUserInfo",this.user)
      if (flag.code == 200){
        this.$message({
          showClose: true,
          message: flag.msg || "修改成功",
          type: "success",
          offset: "70",
        });
      }
    },

    //修改密码
    async submit1(){
      let flag = await this.$store.dispatch("user/updateUserPassowrd",
          {oldPassword:this.oldPassword,newPassword:this.newPassword})
      if (flag.code == 200){
        this.$message({
          showClose: true,
          message: flag.msg || "修改成功",
          type: "success",
          offset: "70",
        });
      } else {
        this.$message({
          showClose: true,
          message: flag.msg || "修改失败",
          type: "error",
          offset: "70",
        })
      }
    },

    // 关闭按钮
    close() {
      this.$router.push("/home")
    }
  },
  computed: {
    //用户信息
    ...mapState("user", {userName: "userInfo"}),
  }
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  width: 1440px;
  margin-top: 30px;
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 72px;
  border-bottom: 1px solid #e6e6e6;

  .left-side {
    width: 364px;
    margin-right: 24px;

    padding: 24px;
    margin-bottom: 24px;
    border-radius: 4px;
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.08);
    background-color: #fff;
  }

  .right-side {
    width: 1052px;
    border-radius: 4px;
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.08);
    background-color: #fff;
    padding: 24px;
    margin-bottom: 24px;
  }
}
</style>
